<template>
  <div style="width: 1000px">
    <!-- 项目经历 -->
    <div class="warp__2BP03">
      <div class="warp__1CDpL">
        <div class="warp_l__34yS8">
          <span class="a1"></span><span class="work__00001">项目经历</span>
        </div>
        <div class="warp_r__1-t6m" v-if="opencom==1">
          <img class="icon_style__xOInT" alt="" src="">
          <span @click="additemcom()">添加</span>
        </div>
      </div>
    </div>
    <div style="width: 150px; height: 50px;"></div>
    <div style="width: 500px; height: 50px;background: #F2F6FC; " v-if="closecom==1&&itemList==null">
      <font style="font-size:15px;line-height: 50px;padding-left: 30px">完善项目经历信息，有助于Hr更真实的了解你的能力</font>
      <a @click="addcomp">立即添加</a>
    </div>
    <div style="width: 700px; height: 500px;" v-if="opencom==2">
      <font color="green" style="font-size:15px;line-height: 30px;padding-left: 30px;">添加项目经验</font><font style="font-size:12px;line-height: 30px;padding-left: 20px">请放心填写，将自动为您屏蔽相关公司</font>
      <el-form ref="form" :model="item" label-width="80px" style="padding-left:30px; padding-top:30px">
          <el-form-item label="项目名称">
            <el-input v-model="item.itemName"></el-input>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-select v-model="item.companyName">
               <el-option label="不关联公司" value="不关联公司"></el-option>
            </el-select>
            <span>项目周期</span>
            <el-date-picker type="date" placeholder="开始时间" v-model="item.itemInDate" style="width: 25%;"></el-date-picker>
              <el-date-picker type="date" placeholder="结束时间" v-model="item.itemOutDate" style="width: 25%;" @change="thinkdate"></el-date-picker>
          </el-form-item>
          <el-form-item label="项目链接">
            <el-input v-model="item.itemUrl" placeholder="请填写项目链接（选填）"></el-input>
          </el-form-item>
          <el-form-item label="项目描述">
            <el-input type="textarea" v-model="item.itemDesc"></el-input>
            <!-- <div class="mod-demo-ueditor">
            <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
            </div> -->
          </el-form-item>
          <el-form-item label="你的成就">
            <el-input type="textarea" v-model="item.achievement"></el-input>
            <!-- <div class="mod-demo-ueditor">
            <script :id="ueId2" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
            </div> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="additem">完成</el-button>
            <el-button @click="opencom=1,closecom=1">取消</el-button>
          </el-form-item>
        </el-form>
    </div>
    <!-- 修改 -->
    <div style="width: 700px; height: 500px;" v-if="updateopencom==2">
      <font color="green" style="font-size:15px;line-height: 30px;padding-left: 30px;">添加项目经验</font><font style="font-size:12px;line-height: 30px;padding-left: 20px">请放心填写，将自动为您屏蔽相关公司</font>
      <el-form ref="form" :model="updateitem" label-width="80px" style="padding-left:30px; padding-top:30px">
          <el-form-item label="项目名称">
            <el-input v-model="updateitem.itemName"></el-input>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-select v-model="updateitem.companyName">
               <el-option label="不关联公司" value="不关联公司"></el-option>
            </el-select>
            <span>项目周期</span>
            <el-date-picker type="date" placeholder="开始时间" v-model="updateitem.itemInDate" style="width: 25%;"></el-date-picker>
              <el-date-picker type="date" placeholder="结束时间" v-model="updateitem.itemOutDate" style="width: 25%;" @change="thinkdate"></el-date-picker>
          </el-form-item>
          <el-form-item label="项目链接">
            <el-input v-model="updateitem.itemUrl" placeholder="请填写项目链接（选填）"></el-input>
          </el-form-item>
          <el-form-item label="项目描述">
            <el-input type="textarea" v-model="updateitem.itemDesc"></el-input>
            <!-- <div class="mod-demo-ueditor">
            <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
            </div> -->
          </el-form-item>
          <el-form-item label="你的成就">
            <el-input type="textarea" v-model="updateitem.achievement"></el-input>
            <!-- <div class="mod-demo-ueditor">
            <script :id="ueId2" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
            </div> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateitemonsubmit">完成</el-button>
            <el-button @click="updateopencom=1,updateitem={}">取消</el-button>
          </el-form-item>
        </el-form>
    </div>
    <div style="width: 700px;height: 150px" v-for="(item,index) in itemList" :key="index" v-if="itemList!=null" v-show="item.id!=updateitem.id">
      <div style="width:700px;height:35px">
        <font style="padding-left:5px">{{item.itemName}}</font>
        <a  style="float: right" @click="updateitemcom(item.id)"><i class="el-icon-edit" @click="updateitemcom(item.id)"></i>编辑</a>
        <a  style="float: right" @click="delitem(item.id)"><i class="el-icon-delete" @click="delitem(item.id)"></i>删除</a>
      </div>
      <div style="width:700px;height:25px"><font style="padding-left:5px">{{item.itemDesc}}</font></div>
      <div style="width:700px;height:25px"><font style="padding-left:5px">{{item.achievement}}</font></div>
      <div style="width:700px;height:40px;padding-top:10px"><font style="padding-left:5px">项目链接:</font><font color="green">{{item.itemUrl}}</font></div>
    </div>
    <!-- <div class="mod-demo-ueditor">
            <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
            </div> -->
    <!-- 教育经历 -->
    <div class="warp__2BP03">
      <div class="warp__1CDpL">
        <div class="warp_l__34yS8">
          <span class="a1"></span><span class="work__00001">教育经历</span>
        </div>
        <div class="warp_r__1-t6m" v-if="opensourse==1">
          <img class="icon_style__xOInT" alt="" src="">
          <span @click="addeducationopen">添加</span>
        </div>
      </div>
    </div>
    <div style="width: 150px; height: 50px;"></div>
    <div style="width: 700px; height: 350px;background: #F2F6FC;" v-if="opensourse==2">
      <div style="width: 500px; height: 50px;padding-top: 20px;padding-bottom: 50px"><font style="font-size:20px;line-height: 20px;padding-left: 30px;margin-top: 10px;" color="green">添加教育经历</font></div>
      <el-form ref="form" :model="education" label-width="80px" style="padding-left:30px">
        <el-form-item label="学校名称">
          <el-input v-model="education.schoolName"></el-input>
        </el-form-item>
        <el-form-item label="在校时间">
            <el-date-picker type="date" placeholder="入学时间" v-model="education.schoolInDate" style="width: 25%;"></el-date-picker>
            <el-date-picker type="date" placeholder="毕业时间" v-model="education.schoolOutDate" style="width: 25%;"></el-date-picker>
            <font style="padding-left: 30px; padding-right: 30px">学历</font>
             <el-select v-model="education.education" style="width:30%">
              <el-option label="大专" value="大专"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="专业名称">
          <el-input v-model="education.majorName" placeholder="请输入所学专业"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addeducation">确认</el-button>
          <el-button @click="opensourse=1">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 回显 -->
    <div style="width: 700px; height: 350px;background: #F2F6FC;" v-if="updateeducationopen==2">
      <div style="width: 500px; height: 50px;padding-top: 20px;padding-bottom: 50px"><font style="font-size:20px;line-height: 20px;padding-left: 30px;margin-top: 10px;" color="green">添加教育经历</font></div>
      <el-form ref="form" :model="educationupdate" label-width="80px" style="padding-left:30px">
        <el-form-item label="学校名称">
          <el-input v-model="educationupdate.schoolName"></el-input>
        </el-form-item>
        <el-form-item label="在校时间">
            <el-date-picker type="date" placeholder="入学时间" v-model="educationupdate.schoolInDate" style="width: 25%;"></el-date-picker>
            <el-date-picker type="date" placeholder="毕业时间" v-model="educationupdate.schoolOutDate" style="width: 25%;"></el-date-picker>
            <font style="padding-left: 30px; padding-right: 30px">学历</font>
             <el-select v-model="educationupdate.education" style="width:30%">
              <el-option label="大专" value="大专"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="专业名称">
          <el-input v-model="educationupdate.majorName" placeholder="请输入所学专业"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateeducationonsubmit">确认</el-button>
          <el-button @click="updateeducationopen=1,educationupdate={}">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="width: 700px;height: 60px" v-for="(item,index) in educationList" :key="index" v-if="educationList!=null" v-show="item.id!=educationupdate.id">
      <font style="line-height:30px;padding-left:20px">{{item.schoolName}}</font><br>
      <font style="line-height:30px;padding-left:20px">{{item.education+"/"+item.majorName}}</font>
      <a  style="float: right" @click="updateeducation(item.id)"><i class="el-icon-edit" @click="updateeducation(item.id)"></i>编辑</a>
    </div>
    <!-- 社交主页 -->
    <div class="warp__2BP03">
      <div class="warp__1CDpL">
        <div class="warp_l__34yS8">
          <span class="a1"></span><span class="work__00001">社交主页</span>
        </div>
        <div class="warp_r__1-t6m">
          <img class="icon_style__xOInT" alt="" src="">
          <span @click="addJobExpectations">添加</span>
        </div>
      </div>
    </div>
    <div style="width: 150px; height: 50px;"></div>
    
    <div style=" width: 700px; height: 230px;background: #F2F6FC;padding-top: 20px;" v-show="open=='2'" >
      <div style="width: 180px; height: 35px;"><div style="padding-left: 35px;"><font color="green" style="font-size:15px;">添加社交主页</font></div></div>
      <div style="padding-left: 35px;"><el-input placeholder="请输入内容" style="width:650px" v-model="social.httpUrl">
        <template slot="prepend">Http://</template>
      </el-input>
      </div>
      <div style="padding-top: 20px;">
      <div style="padding-left: 35px;"><img src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210714201948.png"/></div>
      </div>
      <div style="padding-left: 35px;"><el-button type="success" @click="addsocial">完成</el-button>    <a @click="open=1">取消</a></div>
    </div>
    <!-- 回显 -->
    <div style=" width: 700px; height: 230px;background: #F2F6FC;padding-top: 20px;" v-show="updateopen=='2'" >
      <div style="width: 180px; height: 35px;"><div style="padding-left: 35px;"><font color="green" style="font-size:15px;">添加社交主页</font></div></div>
      <div style="padding-left: 35px;"><el-input placeholder="请输入内容" style="width:650px" v-model="updatesocial.httpUrl">
        <template slot="prepend">Http://</template>
      </el-input>
      </div>
      <div style="padding-top: 20px;">
      <div style="padding-left: 35px;"><img src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210714201948.png"/></div>
      </div>
      <div style="padding-left: 35px;"><el-button type="success" @click="addsocial">完成</el-button>    <a @click="updateopen=1">取消</a></div>
    </div>
    <div v-if="socialList!=null">
      <ol >
        <li v-for="(item,index) in socialList" :key="index" v-if="item.id!=updatesocial.id" style="width: 800px;margin-left: 40px;list-style-type: disc;list-style-image: url(http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210716093155.png);">
        <font style="font-size:20px;">{{item.httpUrl}}</font>
        <a  style="float: right" @click="updatesocialopen(item.id)"><i class="el-icon-edit" @click="updatesocialopen(item.id)"></i>编辑</a>
        <a  style="float: right" @click="delsocial(item.id)"><i class="el-icon-delete" @click="delsocial(item.id)"></i>删除</a>
        </li>
      </ol>
    </div>
    <!-- 上传照片 -->
    <div class="warp__2BP03">
      <div class="warp__1CDpL">
        <div class="warp_l__34yS8">
          <span class="a1"></span><span class="work__00001">上传照片</span>
        </div>
        <div class="warp_r__1-t6m">
          <img class="icon_style__xOInT" alt="" src="">
          <span @click="action='https://jsonplaceholder.typicode.com/posts/'">添加</span>
        </div>
      </div>
    </div>
    <div style="width: 500px; height: 230px;">
      <div style="width: 150px; height: 50px;"></div>
    <el-upload
    class="upload-demo"
    drag
    action="http://localhost:8868/api/resume/file/upload"
    :on-success="handleAvatarSuccess">
    <img v-for="(item,index) in images" :key="index" :src="item.mageUrl">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text"><font color="#ccc">支持.jpg,.gif,.jpeg,.png,.pjpeg格式文件，大小不超过10M</font></div>
  </el-upload>
  </div>
    
 
  </div>
  
</template>

<script>
import ueditor from 'ueditor'
export default {
  name:"home",
  data(){
    
    return{
      open:1,
      opencom:1,
      closecom:1,
      opensourse:1,
      social:{
        httpUrl:null
      },
      item:{
        itemName:null,
        companyName:"不关联公司",
        itemInDate:null,
        itemOutDate:null,
        itemUrl:null,
        itemDesc:null,
        achievement:null,
        resumeId:null
      },
      education:{
        schoolName:null,
        schoolInDate:null,
        schoolOutDate:null,
        education:null,
        majorName:null,
        resumeId:null
      },
      images:[{image:{
        mageUrl:null
      }}],
      educationupdate:{},
      educationList:[],
      socialList:[],
      dialogVisible:false,
      updateeducationopen:1,
      updatesocial:{},
      updateopen:1,
      itemList:[],
      updateitem:{},
      updateopencom:1,
      ueId: `J_ueditorBox_${new Date().getTime()}`,
      ueId2: `J_ueditorBox_${new Date().getTime()}`,
    }
  },
  methods:{
    addJobExpectations(){
      if(this.updateopen==2){
         this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.open = 2;
          this.updateopen=1;
        }).catch(() => {
        });
      }
      this.updatesocialopen = null;
      this.open = 2;
    },
    handleAvatarSuccess(res, file) {
      this.images.push({httpUrl:URL.createObjectURL(file.raw)});
      this.resumeId=0;
      this.$http({
              url: this.$http.adornUrl("/resume/image/save/"),
              method: 'post',
              data: this.$http.adornData({
                'httpUrl': URL.createObjectURL(file.raw),
                'resumeId': this.resumeId,
              })
            }).then(({data}) => {
            })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpg';

      if (!isJPG) {
        this.$message.error('上传只能图片格式!');
      }
      return isJPG;
    },
    addcomp(){
      this.opencom = 2;
      this.closecom = 2;
    },
    addsocial(){
      this.social.resumeId=0;
      this.$http({
              url: this.$http.adornUrl("/resume/social/save/"),
              method: 'post',
              data: this.$http.adornData({
                'httpUrl': this.social.httpUrl,
                'resumeId': this.social.resumeId,
              })
            }).then(({data}) => {
            })
      this.findByresumeId();
      this.open =1;
    },
    updatesocialonsubmit(){
      this.social.resumeId=0;
      this.$http({
              url: this.$http.adornUrl("/resume/social/save/"),
              method: 'post',
              data: this.$http.adornData({
                'id': this.updatesocial.id,
                'httpUrl': this.updatesocial.httpUrl,
                'resumeId': this.updatesocial.resumeId,
              })
            }).then(({data}) => {
              this.updateopen = 1;
              this.findByresumeId();
            })
    },
    findByresumeId(){
      this.social.resumeId = 0;
      this.$http({
              url: this.$http.adornUrl(`/resume/social/findByresumeId/${this.social.resumeId}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              console.log(data);
              this.socialList = data.socialList;
            });
      this.$http({
              url: this.$http.adornUrl(`/resume/itemexperience/findByresumeId/${this.social.resumeId}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              console.log(data);
              this.itemList = data.itemList;
            })
      this.$http({
              url: this.$http.adornUrl(`/resume/educationexperience/findByresumeId/${this.social.resumeId}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              console.log(data);
              this.educationList = data.educationList;
            })
      this.$http({
              url: this.$http.adornUrl(`/resume/image/findByresumeId/${this.social.resumeId}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              console.log(data);
              this.images = data.images;
            })
    },
    delsocial(id){
      this.$http({
              url: this.$http.adornUrl(`/resume/social/deleteById/${id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
            })
      this.findByresumeId();
    },
    updatesocialopen(id){
      if(this.open==2){
         this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.open = 1;
          this.updateopen=2;
        }).catch(() => {
        });
      }
      this.$http({
              url: this.$http.adornUrl(`/resume/social/info/${id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              this.updatesocial = data.social;
            })
      this.updateopen = 2;
    },
    onSubmit(){
      
    },
    additem(){
      this.item.resumeId=0;
      this.$http({
              url: this.$http.adornUrl("/resume/itemexperience/save/"),
              method: 'post',
              data: this.$http.adornData({
                'itemName': this.item.itemName,
                'companyName': this.item.companyName,
                'itemInDate': this.item.itemInDate,
                'itemOutDate': this.item.itemOutDate,
                'itemUrl': this.item.itemUrl,
                'itemDesc': this.item.itemDesc,
                'achievement': this.item.achievement,
                'resumeId': this.item.resumeId,
              })
            }).then(({data}) => {
              this.opencom = 1;
              this.findByresumeId();
            })
      this.findByresumeId();
    },
    updateitemcom(id){
      if(this.opencom==2){
         this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.opencom = 1;
          this.updateopencom=2;
        }).catch(() => {
        });
      }
       this.$http({
              url: this.$http.adornUrl(`/resume/itemexperience/info/${id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              this.updateitem = data.itemExperience;
            })
      this.updateopencom =2;
    },
    updateitemonsubmit(){
      this.updateitem.resumeId =0;
      this.$http({
              url: this.$http.adornUrl("/resume/itemexperience/update/"),
              method: 'post',
              data: this.$http.adornData({
                'id': this.updateitem.id,
                'itemName': this.updateitem.itemName,
                'companyName': this.updateitem.companyName,
                'itemInDate': this.updateitem.itemInDate,
                'itemOutDate': this.updateitem.itemOutDate,
                'itemUrl': this.updateitem.itemUrl,
                'itemDesc': this.updateitem.itemDesc,
                'achievement': this.updateitem.achievement,
                'resumeId': this.updateitem.resumeId,
              })
            }).then(({data}) => {
              this.updateopencom = 1;
              this.findByresumeId();
            })
    },
    delitem(id){
      this.$http({
              url: this.$http.adornUrl(`/resume/itemexperience/deleteById/${id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
            })
      this.findByresumeId();
    },
    additemcom(){
      if(this.updateopencom==2){
         this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.opencom = 2;
          this.updateopencom=1;
        }).catch(() => {
        });
      }
      this.opencom=2;
      this.closecom=2;
      this.updateitem = {};
    },
    thinkdate(){
      if(this.item.itemOutDate.getTime()/(24*3600*1000)-this.item.itemInDate.getTime()/(24*3600*1000)>90){
        alert("项目时长不能超过三个月");
        this.item.itemOutDate = null;
      }
      if(this.item.itemOutDate.getTime()/(24*3600*1000)-this.item.itemInDate.getTime()/(24*3600*1000)<0){
        alert("请正确填写");
        this.item.itemOutDate = null;
      }
    },
    addeducationopen(){
       if(this.updateeducationopen==2){
         this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.opensourse = 2;
          this.updateeducationopen=1;
        }).catch(() => {
        });
      }
      this.opensourse = 2;
    },
    addeducation(){
      this.education.resumeId=0;
      this.$http({
              url: this.$http.adornUrl("/resume/educationexperience/save/"),
              method: 'post',
              data: this.$http.adornData({
                'schoolName': this.education.schoolName,
                'schoolInDate': this.education.schoolInDate,
                'schoolOutDate': this.education.schoolOutDate,
                'education': this.education.education,
                'majorName': this.education.majorName,
                'resumeId': this.education.resumeId,
              })
            }).then(({data}) => {
            })
      this.findByresumeId();
      this.opensourse = 1;
    },
    updateeducationonsubmit(){
      this.education.resumeId=0;
      this.$http({
              url: this.$http.adornUrl("/resume/educationexperience/update/"),
              method: 'post',
              data: this.$http.adornData({
                'id': this.education.id,
                'schoolName': this.education.schoolName,
                'schoolInDate': this.education.schoolInDate,
                'schoolOutDate': this.education.schoolOutDate,
                'education': this.education.education,
                'majorName': this.education.majorName,
                'resumeId': this.education.resumeId,
              })
            }).then(({data}) => {
              this.updateeducationopen = 1;
            })
    },
    updateeducation(id){
      if(this.opensourse==2){
         this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.opensourse = 1;
          this.updateeducationopen=2;
        }).catch(() => {
        });
      }
      this.$http({
              url: this.$http.adornUrl(`/resume/educationexperience/info/${id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              this.educationupdate = data.educationExperience;
              this.updateeducationopen = 2;
            })
    }
  },
  mounted(){
    this.findByresumeId();
    this.ue = ueditor.getEditor(this.ueId, {
        // serverUrl: '', // 服务器统一请求接口路径
        zIndex: 1000,
         toolbars: [[
               'insertorderedlist','insertunorderedlist'
           ]]
      }),
       this.ue1 = ueditor.getEditor(this.ueId2, {
        // serverUrl: '', // 服务器统一请求接口路径
        zIndex: 1000,
         toolbars: [[
               'insertorderedlist','insertunorderedlist'
           ]]
      })
  }
}
</script>




<style lang="scss">
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
  .mod-home {
    line-height: 1.5;
  }
  .warp__1CDpL .warp_r__1-t6m .icon_style__xOInT {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
  }

  .warp__1CDpL .warp_l__34yS8 {
    float: left;
  }

  .warp__1CDpL .warp_r__1-t6m {
    margin-right: 50px;
    float: right;
    font-size: 14px;
    font-weight: 400;
    color: #02B28A;
    line-height: 28px;
    cursor: pointer;
  }

  .a1{
    border-left: 3px solid #00B38A;
    height: 16px;
    position: absolute;
    top: 24px;
    left: 30px;
  }

  .work__00001{
    font-size: 20px;
    font-weight: 600;
    color: #040404;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

